<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>大连市</span>
          <img src="../assets/xjt3.png" alt="" class="head-btm" />
        </div>
        <div class="head-title">
          <img src="../assets/sousuo.png" alt="" />
          <input type="text" placeholder="请输入公司名称"/>
        </div>
        <div class="head-search">搜索</div>
      </div>
    </div>
    <div class="content">
      <div
        class="block"
        v-for="item in list"
        @click="goFirm(item.companyId)"
      >
        <div><img src="../assets/avatar.png" alt="" /></div>
        <div class="block-div">
          <p>{{ item.companyName }}</p>
          <div>
            <span>{{ item.scale }}人</span>
            <span>{{ item.industry }}</span>
            <span>在招职位：{{ item.jobNum }}</span>
            <img src="../assets/yjt.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div @click="go('/')">
        <img src="../assets/shouye.png" alt="" />
        首页
      </div>
      
      <div @click="go('/faxian')">
        <img src="../assets/faxian.png" alt="" />
        发现
      </div>
      <div @click="go('/tuijian')" class="footer-color">
        <img src="../assets/tuijian1.png" alt="" />
        推荐
      </div>
      <div @click="go('/my')">
        <img src="../assets/wode.png" alt="" />
        我的
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "tuijian",
  components: {  },
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getData()
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      list: [
          {
            companyId: 1,
            companyName: 'Aaaa',
            scale: 100,
            industry: 'IT',
            jobNum: 4
          }

      ],
      // status为用户身份，0是求职者，1是招聘者
      status:localStorage.status
    };
  },
  // methods 编写js函数
  methods: {
    getData(){
      this.$http({
        methods:"get",
        url:"api/company/list",
        params:{
          // cityId:"",
          companyName:""
        }
      }).then(({data}) => {
      console.log(data);
        this.list = data.page.list;
      })
    },
    go(r) {
      this.$router.push(r);
    },
    goFirm(id) {
      this.$router.push({name:'firm', params:{companyId:id}})
    },
    addr(){
      this.$router.push("/addr")
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 46px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-btm {
  width: 10px;
}
.head-city {
  font-size: 12px;
  padding-right: 20px;
}
.head-city img {
  margin-left: 5px;
}
.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}
.head-title img {
  width: 14px;
  margin-right: 5px;
}
.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}
.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}
.con-top-left {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}
.active {
  color: #000;
  font-weight: 700;
}
.con-top-right {
  height: 100%;
  color: #757575;
  font-size: 14px;
}
.more {
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.content {
  width: 100%;
  background: rgb(248, 248, 248);
  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 46px;
}
.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: row;
  align-items: center;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
.block-div {
  padding: 10px 15px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.block-div span {
  margin-right: 20px;
}
.block p {
  font-size: 16px;
}
.block span {
  color: #cecece;
  font-size: 12px;
}
.block-div div {
  display: flex;
  align-items: center;
}
.block-div img {
  width: 14px;
  height: 14px;
}
</style>
